import React from 'react';
import Path from '../../../lib/path.js';

var FileUploader = React.createClass({
    getInitialState: function() {
        return {
            value:this.props.defaultValue?this.props.defaultValue:"未选择文件",
            name:this.props.refName
        };
    },
    componentWillReceiveProps:function(newProps){
        this.setState({
            value: newProps.defaultValue?newProps.defaultValue:"未选择文件",
            name:newProps.refName
        },this.render);
    },
    handleChange: function(event) {
        this.setState({value: document.getElementById(this.state.name+"_upload").files[0].name});
    },
    getValue:function(){
        return this.state.value;
    },
    getFile:function(){
        return document.getElementById(this.state.name+"_upload").files[0];
    },
    upload:function(){
        document.getElementById(this.state.name+"_upload").click();
    },
    render:function(){
        return(
            <div className="FormComponent">
                <span className="form_control_name">{this.props.title}</span>
                <div className="form_control" >
                    <div style={{background:"#ccc",height:"36px",width:"100px",float:"left",cursor:"pointer",textAlign:"center"}} onClick={this.upload}>
                        <img src="/res/image/upload.png" style={{marginTop: "-2px"}}/>
                        <span style={{color:"white",height:"36px",lineHeight: "36px",marginLeft:" 5px",fontSize: "14px"}}>上传文件</span>
                        <input type="file" id={this.state.name+"_upload"} style={{display:"none"}} onChange={this.handleChange}/>
                    </div>
                    <input value={this.state.value} readOnly="readOnly"  style={{backgroundColor:"#fdfdfd",border:"none",height:"36px",lineHeight: "36px",color:"#969696",paddingLeft:"5px",fontSize:"14px",fontFamily:'Microsoft YaHei'}}/>
                </div>

            </div>
        )
    }
})

module.exports = FileUploader;